<template>
  <div class="selector-input">
    <label class="placeholder">{{ placeholder }}</label>
    <input
        type="text"
        class="input"
        :value="value"
        @input="(e) => $emit('searchOptions', e.target.value)"
        @blur="setValue"
        ref="input"
    />
    <span class="iconfont icon-zhankai"></span>
  </div>
</template>

<script>
// import { getCurrentInstance } from "vue";

export default {
  name: "SelectorInput",


  props: {
    value: {
      type: String
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },

  setup(props, ctx) {
    const setValue = function (e) {
      if(e.target.value.length) {
        e.target.value = props.value
      } else {
        ctx.emit('setItemValue', { text: '' })
      }
      ctx.emit('searchOptions', '')

    }
    // const instance = getCurrentInstance()
    // const setValue = function (v) {
    //
    //   const _input = instance.refs.input
    //   if(_input.value.length > 0) {
    //
    //     _input.value = v
    //     ctx.emit('searchOptions', '')
    //   }
    //   console.log(8, _input.value)
    // }

    return {
      setValue
    }
  }


}
</script>

<style scoped>
  .placeholder {
    position: absolute;
    top: 3px;
    left: 70px;
    color: #666666;
  }

  .iconfont {
    position: absolute;
    top: 3px;
    right: 65px;
  }

  .input {
  }
</style>